<template>
  <el-container style="height: 720px; border: 1px solid #eee">
    <Aside />

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <span>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            {{ this.currentUser }}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><el-button>个人中心</el-button></el-dropdown-item>
            <el-dropdown-item
              ><el-button @click="editAdmin()"
                >修改密码</el-button
              ></el-dropdown-item
            >
            <el-dropdown-item
              ><el-button @click="logOut()"
                >退出登录</el-button
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 路由替换 -->
      <router-view />
    </el-container>
  </el-container>
</template>

<script>
// import router from "@/router/routers";
import Aside from "@/views/system/components/Aside.vue";

export default {
  name: "Dashboard",
  components: {
    Aside,
  },
  data() {
    return {
      loadding: false,
      addFormVisible: false,
      editFormVisible: false,
      formLabelWidth: "120px",
      currentId: localStorage.getItem("ID"),
      currentUser: localStorage.getItem("NAME"),
    };
  },
  methods: {
    logOut() {
      console.log("退出");
      localStorage.clear();
      this.$router.push({ path: "/index" });
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>